<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: "yForm",
  props: {
    model: {
      type: Object,
    },
    rules: {
      type: Object,
    },
  },
  provide() {
    return {
      form: this,
    };
  },
  data() {
    return {
      fields: [], // 用来缓存所有 yFormItem 实例的
    };
  },
  created() {
    /**
     * Vue.js的组件渲染时由内到外的，所以FormItem先于Form渲染！
     * 因此不能在mounted内监听事件; 得在created内。
     * Form的 created 先于 FormItem的 mounted。
     */
    this.$on("on-form-item-add", (element) => {
      if (element) this.fields.push(element);
    });
    this.$on("on-form-item-remove", (element) => {
      if (element.prop) {
        return this.fields.splice(this.fields.indexOf(element), 1);
      }
    });
  },

  methods: {
    // 公开方法：全部重置数据
    resetFields() {
      console.log('123',this.fields)
      this.fields.forEach((field) => {
        field.resetField();
      });
    },
    // 公开方法：全部校验数据，支持 Promise
    validate(callback) {
      return new Promise((resolve) => {
        let valid = true;
        let count = 0;
        this.fields.forEach((field) => {
          field.validate("", (errors) => {
            if (errors) {
              valid = false;
            }
            if (++count === this.fields.length) {
              // 全部完成
              resolve(valid);
              if (typeof callback === "function") {
                callback(valid);
              }
            }
          });
        });
      });
    },
  },
};
</script>

<style>

</style>